<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢迎注册会员</title>
  </head>
  <body>
    <form action="#" method="post" enctype="multipart/form-data">
      <h5>欢迎注册会员</h5>
      <label for="phone number">手机号码：</label>
      <input
        type="text"
        id="phone number"
        name="phone number"
        placeholder="11位手机号"
      />
      <font color="red">必填</font><br />
      <label for="create password">创建密码：</label>
      <input
        type="text"
        id="create password"
        name="create password"
        placeholder="8位密码"
      />
      <font color="red">必填</font><br />
      <label for="create e-mail">注册邮箱：</label>
      <input
        type="text"
        name="create e-mail"
        id="create e-mail"
        placeholder="例如:wustzz@sina.com"
      />
      <font color="red">必填</font><br />
      <label for="VC">&nbsp;&nbsp;&nbsp;验证码：</label>
      <input type="text" name="VC" id="VC" /><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：
      <input type="radio" name="sex" value="男" /> 男
      <input type="radio" name="sex" value="女" /> 女<br />
      <label for="birthday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：</label>
      <input
        type="text"
        name="birthday"
        id="birthday"
        placeholder="年/月/日/"
      /><br />
      <label for="age">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：</label>
      <input type="text" name="age" id="age" /><br />
      <label for="NP">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</label>
      <select name="major" id="NP">
        <option value="0" selected="selected">湖北省</option>
        <option value="1">江苏省</option>
      </select>
      <select name="major" id="NP">
        <option value="0" selected="selected">武汉市</option>
        <option value="1">黄石市</option>
        <option value="2">十堰市</option></select
      ><br />
      <label for="EB">个人学历：</label>
      <select name="major" id="EB">
        <option value="0" selected="selected">本科</option>
        <option value="1">大专</option></select
      ><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪：
      <input
        type="range"
        id="score"
        name="score"
        min="0.0"
        max="10000.0"
        step="0.5"
        value="5000.0"
      />
      <span id="msg"></span>
      <br />
      <label for="like">个人爱好：</label>
      <input type="radio" name="like" value="唱歌" /> 唱歌
      <input type="radio" name="like" value="跑步" /> 跑步
      <input type="radio" name="like" value="游泳" /> 游泳<br />
      <label for="test-image-file">个人照片：</label>
      <input
        type="file"
        name="myfile"
        id="test-image-file"
        accept="image/*"
      />
      <div id="test-image-preview"><br />
      <label for="intro">个人简介：</label>
      <textarea name="intro" id="intro" cols="50" rows="10"></textarea><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="submit" value="提交" />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" value="重填" />
    </form>
    <script>
      var msg = document.getElementById("msg"); // 根据id值找到span元素
      window.onload = function () {
        msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
      };
      document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
      };
    </script>
    <script>
      var fileInput = document.getElementById('test-image-file');
      var info = document.getElementById('test-file-info');
      var preview = document.getElementById('test-image-preview'); 
      fileInput.addEventListener('change', function () { // 监听change事件
      preview.style.backgroundImage = ''; // 清除背景图片
      if (!fileInput.value) {
      info.innerHTML = '没有选择文件';
      return;
      } 
      var file = fileInput.files[0]; // 获取File引用
      // 获取File信息:
      info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      alert('不是有效的图片文件!');
      return;
      } 
      var reader = new FileReader(); // 读取文件
      reader.onload = function (e) { // 发起一个异步操作来读取文件内容
      var data = e.target.result; // data串形如： '...(base64编码)...' 
      preview.style.backgroundImage = 'url('+data+')';
      }; 
      reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
      </script>
  </body>
</html>
